<template>
  <div id="practicable">
    <div v-show="pageInfo.cur === 1">
      <f7-block-title>基本信息</f7-block-title>
      <f7-list id="three-form-0" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item title="乡镇名" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true, searchbar: true, searchbarPlaceholder: '按汉字进行搜索'}">
          <select name="town">
            <optgroup v-for="t in place.filter(item => item.level === 1)" :label="t.pname">
              <option v-for="p in place.filter(item => item.pid === t.id)" :value="p.id">{{p.pname}}</option>
            </optgroup>
          </select>
        </f7-list-item>
        <f7-list-item>
          <f7-label>督查组</f7-label>
          <f7-input type="text" readonly :value="user.name" name="inspector"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>督查时间</f7-label>
          <f7-input id="duchatime" type="text" name="time" readonly></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>一、责任落实</f7-block-title>
      <f7-block-title>1、乡(镇)党委、政府会议记录及纪要</f7-block-title>
      <f7-list id="three-form-1" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments1"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide1"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark1"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>2、乡(镇)脱贫规划、年度脱贫坚攻工作方案等</f7-block-title>
      <f7-list id="three-form-2" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments2"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide2"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark2"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>3、乡(镇)基础党建管理、扶贫档案管理等</f7-block-title>
      <f7-list id="three-form-3" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments3"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide3"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark3"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>二、政策落实</f7-block-title>
      <f7-block-title>4、乡(镇)落实“六个精准”、“五个一批”，关于精准识别、因户施策、动态调整、脱贫退出工作相关情况</f7-block-title>
      <f7-list id="three-form-4" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments4"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide4"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark4"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 2">
      <f7-block-title>二、政策落实</f7-block-title>
      <f7-block-title>5、乡(镇)关于危房改造和易地扶贫搬迁相关政策文件及工作展开情况</f7-block-title>
      <f7-list id="three-form-5" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments5"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide5"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark5"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>6、乡(镇)落实低保、兜底保障、医疗保障、教育保障等开展情况</f7-block-title>
      <f7-list id="three-form-6" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments6"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide6"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark6"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>7、乡(镇)关于落实扶贫项目资金管理相关情况</f7-block-title>
      <f7-list id="three-form-7" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments7"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide7"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark7"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>8、乡(镇)关于道路建设、农村饮水工程、农网改造、通讯网络建设、村部建设、乡村卫生院所、乡村学校建设等基础设施建设情况（包括申报、公示、实施计划、项目清单、目前工作进度等）</f7-block-title>
      <f7-list id="three-form-8" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments8"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide8"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark8"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>9、乡(镇)落实“两卡两折”的情况，尤其是去年省里面统一给贫困户发放的“政策明白卡”和存折的使用情况</f7-block-title>
      <f7-list id="three-form-9" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments9"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide9"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark9"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 3">
      <f7-block-title>二、政策落实</f7-block-title>
      <f7-block-title>10、乡(镇)推动贫困人口长期稳定就业情况</f7-block-title>
      <f7-list id="three-form-10" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments10"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide10"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark10"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>11、乡(镇)落实雨落计划职业教育相关情况</f7-block-title>
      <f7-list id="three-form-11" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments11"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide11"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark11"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>12、乡(镇)开展脱贫攻坚培训相关政策、文件及资料等</f7-block-title>
      <f7-list id="three-form-12" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments12"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide12"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark12"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>13、乡(镇)产业发展情况（包括规划、政策、文件等）</f7-block-title>
      <f7-list id="three-form-13" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments13"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide13"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark13"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>14、乡(镇)开展电商精准扶贫相关情况</f7-block-title>
      <f7-list id="three-form-14" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments14"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide14"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark14"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>15、乡(镇)开展金融扶贫的相关情况</f7-block-title>
      <f7-list id="three-form-15" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments15"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide15"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark15"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 4">
      <f7-block-title>二、工作落实</f7-block-title>
      <f7-block-title>16、乡(镇)关于开展扶贫领域作风问题专项治理的实施方案</f7-block-title>
      <f7-list id="three-form-16" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments16"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide16"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark16"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>17、乡(镇)落实《中共湖南省委办公厅、湖南省人民政府办公厅联合下发＜关于全省党政主要领导干部展开脱贫攻坚“三走访三签字”工作＞的通知》的相关情况（文件、会议等）</f7-block-title>
      <f7-list id="three-form-17" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments17"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide17"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark17"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>18、乡(镇)关于脱贫攻坚督查巡查整改相关情况，并提供扶贫相关信访台账</f7-block-title>
      <f7-list id="three-form-18" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments18"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide18"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark18"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>19、乡(镇)扶贫工作队建设情况，提供由乡镇派驻的扶贫工作队名单</f7-block-title>
      <f7-list id="three-form-19" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments19"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide19"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark19"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>20、乡(镇)加强村支两委建设情况，提供2017年村支两委换届情况，乡镇所有村（居）党组织班子名单</f7-block-title>
      <f7-list id="three-form-20" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments20"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide20"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark20"></f7-input>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-show="pageInfo.cur === 5">
      <f7-block-title>二、工作落实</f7-block-title>
      <f7-block-title>21、乡(镇)加大党员致富带头人、创业致富带头人培育情况</f7-block-title>
      <f7-list id="three-form-21" inline-labels form bg-color="white" class="no-margin">
        <f7-list-item>
          <f7-label>提供单位/部门</f7-label>
          <f7-input type="text" name="provide_departments21"></f7-input>
        </f7-list-item>
        <f7-list-item title="是否提供">
          <f7-toggle slot="after" name="provide21"></f7-toggle>
        </f7-list-item>
        <f7-list-item>
          <f7-label>备注</f7-label>
          <f7-input type="text" name="remark21"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-block-title>签字确认</f7-block-title>
      <f7-list id="house-form-22" form bg-color="white" class="no-margin">
        <f7-list-item class="inline-labels">
          <f7-label>督查组</f7-label>
          <f7-input type="text" :value="user.name" readonly></f7-input>
        </f7-list-item>
        <f7-list-item media-list>
          <f7-label>督查组签字</f7-label>
        </f7-list-item>
      </f7-list>
    </div>
    <div v-if="pageInfo.cur === 5" style="height: 228px;">
      <img v-if="!!signature1" :src="signature1" width="100%" height="100%">
    </div>
    <div class="hidesignature" :class="{ showsignature: pageInfo.cur === 5 && !signature1 }" style="top: 350px;">
      <vue-signature ref="signature1"></vue-signature>
      <f7-row>
        <f7-col>
          <f7-button small outline round color="red" @click="$refs.signature1.clear()">清除</f7-button>
        </f7-col>
        <f7-col>
          <f7-button small outline round @click="savesign('signature1')">确定</f7-button>
        </f7-col>
      </f7-row>
    </div>
  </div>
</template>
<script>
import { f7BlockTitle, f7List, f7ListItem, f7Label, f7Input, f7Toggle, f7Row, f7Col, f7Button } from 'framework7-vue'
import { mapState, mapActions } from 'vuex'
import formatdate from 'utils/formatdate'
export default {
  components: {
    f7BlockTitle,
    f7List,
    f7ListItem,
    f7Label,
    f7Input,
    f7Toggle,
    f7Row,
    f7Col,
    f7Button
  },
  props: ['status'],
  computed: {
    ...mapState({
      user: state => state.user,
      pageInfo: state => state.page
    })
  },
  data() {
    return {
      signature1: '',
      context: this.$f7route.context
    }
  },
  created() {

    this.hassave = true
    this.setDate(1)

    this.update_page({ count: 5, cur: 1 })
    this.$root.$off('gopage').$on('gopage', type => {
      if (type === 0) {
        if (this.pageInfo.cur <= 1) return
        if (this.pageInfo.cur == this.pageInfo.count) {
          this.$refs.signature1.clear()
        }
        this.pageInfo.cur -= 1
      } else {
        if (this.pageInfo.cur === this.pageInfo.count) return
        this.pageInfo.cur += 1
      }
    })

    this.$root.$off('save').$on('save', camera => {
      let param = {}
      for (var i = 0; i <= 21; i++) {
        const form = this.$f7.form.convertToData('#three-form-' + i)
        param = Object.assign(param, form)
      }
      if (!param.town) {
        this.$f7.toast.show({ text: '请填写乡镇' })
        return
      }
      if (!param.time) {
        this.$f7.toast.show({ text: '请填写督查时间' })
        return
      }
      if (this.signature1) {
        if (camera) {
          this.$f7.dialog.alert('已签字，无法再上传图片')
          return
        }
        const text = []
        text.push(!!this.signature1 ? '督查组已签字' : '督查组未签字')
        this.$f7.dialog.confirm(`<div>${text.join('</div><div>')}</div>`, '保存后无法修改，确定保存', () => {
          this.saveData(param)
        })
      } else {
        this.saveData(param, camera)
      }
    })
  },
  mounted() {
    var self = this
    let minDate = new Date()
    minDate.setDate(minDate.getDate() - 1)
    this.$f7.calendar.create({
      inputEl: '#duchatime>input',
      openIn: 'customModal',
      closeOnSelect: true,
      routableModals: false,
      animate: false,
      minDate,
      monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      dayNamesShort: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      on: {
        open: calendar => {
          this.$$('#framework7-root').append('<div class="calendar-backdrop backdrop-in"></div>').find('.calendar-backdrop').click(function() {
            self.$$(this).remove()
            calendar.close()
          })
          const time = this.$$('#duchatime>input').val()
          if (!time) return
          calendar.setValue([time])
        },
        close: calendar => {
          this.$$('#framework7-root .calendar-backdrop').remove()
        }
      }
    })

    this.$$('.hidesignature').touchmove(function(e) {
      e.preventDefault()
    })

    this.$f7.preloader.hide()
  },
  methods: {
    ...mapActions([
      'update_page'
    ]),
    savesign(i) {
      this.$f7.dialog.confirm('请确保表单填写完整且签名无误', '', () => {
        this[i] = this.$refs[i].save()
      })
    },
    async saveData(param, camera) {
      param.edittime = formatdate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      param.inspector_sign = this.signature1
      if (!!this.signature1) {
        param.state = 2
        param.overtime = formatdate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      } else {
        param.state = 0
      }
      param.inspector = this.user.id
      for (let key in param) {
        if (param[key] === '') {
          delete param[key]
          continue
        }
        if (!Array.isArray(param[key])) continue
        param[key] = param[key].length
      }
      this.requestId && (param.id = this.requestId)
      const practicable = await this.request('/practicable', param)
      if (practicable.code === 1) {
        this.requestId = this.$root.requestId = practicable.data
        this.hassave = true
        this.$emit('update:status', param.state)
        if (!camera) {
          this.$f7.toast.show({ text: practicable.msg })
        } else {
          camera(this.requestId)
        }
      } else {
        this.$f7.dialog.confirm(practicable.msg, '', () => {
          // 跳转到查看页面 TODO
        })
      }
    },
    async setDate(page) {
      const { id, type } = this.context
      if ((id || this.requestId) && this.hassave) {
        const { data } = await this.request('/getdata', { id: id || this.requestId, type })
        if (!data && !data.id) return
        this.requestId = data.id
        this.viewdata = data
        this.hassave = false
      }
      if (!this.viewdata) return
      if (page === 1) {
        this.$f7.form.fillFromData(`#three-form-0`, {
          town: this.viewdata.town,
          inspector: this.viewdata.inspectorname,
          time: formatdate(new Date(this.viewdata.time), 'yyyy-MM-dd')
        })
        for (let i = 1; i <= 4; i++) {
          this.$f7.form.fillFromData(`#three-form-${i}`, {
            [`provide_departments${i}`]: this.viewdata[`provide_departments${i}`],
            [`provide${i}`]: this.viewdata[`provide${i}`] ? [''] : [],
            [`remark${i}`]: this.viewdata[`remark${i}`]
          })
        }
      } else if (page === 2) {
        for (let i = 5; i <= 9; i++) {
          this.$f7.form.fillFromData(`#three-form-${i}`, {
            [`provide_departments${i}`]: this.viewdata[`provide_departments${i}`],
            [`provide${i}`]: this.viewdata[`provide${i}`] ? [''] : [],
            [`remark${i}`]: this.viewdata[`remark${i}`]
          })
        }
      } else if (page === 3) {
        for (let i = 10; i <= 15; i++) {
          this.$f7.form.fillFromData(`#three-form-${i}`, {
            [`provide_departments${i}`]: this.viewdata[`provide_departments${i}`],
            [`provide${i}`]: this.viewdata[`provide${i}`] ? [''] : [],
            [`remark${i}`]: this.viewdata[`remark${i}`]
          })
        }
      } else if (page === 4) {
        for (let i = 16; i <= 20; i++) {
          this.$f7.form.fillFromData(`#three-form-${i}`, {
            [`provide_departments${i}`]: this.viewdata[`provide_departments${i}`],
            [`provide${i}`]: this.viewdata[`provide${i}`] ? [''] : [],
            [`remark${i}`]: this.viewdata[`remark${i}`]
          })
        }
      } else if (page === 5) {
        if (this.viewdata.inspector_sign) {
          this.signature1 = (new Buffer(this.viewdata.inspector_sign, 'base64')).toString('utf8')
        }
        this.$f7.form.fillFromData(`#three-form-21`, {
          provide_departments21: this.viewdata[`provide_departments21`],
          provide21: this.viewdata[`provide21`] ? [''] : [],
          remark21: this.viewdata[`remark21`]
        })
      }
    }
  },
  watch: {
    'pageInfo.cur': function() {
      this.$nextTick(() => {
        this.setDate(this.pageInfo.cur)
        this.$$('#practicable').scrollTop(0)
      })
    }
  }
}
</script>